<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>default mode</title>
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<link href="./css/view.css" rel="stylesheet">
<link href="./css/editor.css" rel="stylesheet">

<link href="../dist/css/style.css" rel="stylesheet">
</head>

<body>
  <div style="width: 1000px; margin: 0 auto;">
    <p>
      <button id="btn-create">create editor</button>
      <button id="btn-toggle-enable">disable/enable</button>
      <button id="btn-destroy">destroy editor</button>
    </p>
  
    <!-- 编辑器 -->
    <div>
      <div id="editor-toolbar" class="editor-toolbar"></div>
      <div id="editor-text-area" class="editor-text-area"></div>
    </div>
  
    <!-- 内容状态 -->
    <p style="background-color: #f1f1f1;">
      当前文字数量：<span id="total-length"></span>；
      选中文字数量：<span id="selected-length"></span>；
      选中文字："<span id="selected-text"></span>"
    </p>
  
    <!-- 显示内容 -->
    <div id="editor-content-view" class="editor-content-view"></div>
  </div>

  <script src="js/init-content.js"></script>
  <script src="../dist/index.js?t=14"></script>
  <script>
    const E = window.wangEditor

    const editorConfig = { MENU_CONF: {} }
    // editorConfig.autoFocus = false
    // editorConfig.readOnly = true
    // editorConfig.scroll = false
    editorConfig.placeholder = '请输入内容'
    editorConfig.MENU_CONF['uploadImage'] = {
      server: 'http://106.12.198.214:3000/api/upload-img', // 上传图片地址
      fieldName: 'index-fileName'
    }
    console.log('测试上传图片，请使用 upload-image.html')
    editorConfig.onCreated = (editor) => {
      console.log('on created', editor)
    }
    editorConfig.onChange = (editor) => {
      // console.log(editor.children)

      const html = editor.getHtml()
      document.getElementById('editor-content-view').innerHTML = html

      // 选中文字
      const selectionText = editor.getSelectionText()
      document.getElementById('selected-text').innerHTML = selectionText
      document.getElementById('selected-length').innerHTML = selectionText.length
      // 全部文字
      document.getElementById('total-length').innerHTML = editor.getText().length

      // // isSelectedAll
      // console.log('isSelectedAll', editor.isSelectedAll())
    }
    editorConfig.onDestroyed = (editor) => {
      console.log('on destroyed', editor)
    }
    editorConfig.onFocus = (editor) => {
      console.log('onFocus', editor)
    }
    editorConfig.onBlur = (editor) => {
      console.log('onBlur', editor)
    }

    // editorConfig.customPaste = (editor, event) => {
    //   console.log('customPage')
    //   // editor.insertText('xxx------') // 同步
    //   setTimeout(() => {
    //     editor.insertText('yyy------') // 异步
    //   }, 1000)
    //   return false // 阻止默认粘贴，自定义实现粘贴

    //   // return true // 执行默认粘贴
    // }

    const toolbarConfig = {
      // excludeKeys: ['uploadVideo'],
    }

    // create
    let editor, toolbar
    document.getElementById('btn-create').addEventListener('click', () => {
      editor = E.createEditor({
        selector: '#editor-text-area',
        // selector: document.getElementById('editor-text-area'),
        content: window.content1,
        config: editorConfig
      })

      toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        // selector: document.getElementById('editor-toolbar')
        config: toolbarConfig
      })
    })
    console.log(`如果页面没有编辑器，点击 'create' 按钮创建`)

    // toggle enable
    document.getElementById('btn-toggle-enable').addEventListener('mousedown', (e) => {
      // 使用 mousedown ，且 preventDefault ，否则触发编辑器 blur ，导致无法正确 focus
      // TODO 文档中说明（以及其他的 editState）
      e.preventDefault()

      if (editor.getConfig().readOnly) {
        editor.enable()
      } else {
        editor.disable()
      }
    })

    // destroy
    document.getElementById('btn-destroy').addEventListener('click', () => {
      editor.destroy()
      editor = undefined
    })
  </script>
</body>

</html>